<template>
  <div style="width: 100%; height: 100%">
    <!-- <vxe-grid
      border
      :columns="tableData.columns"
      :align="tableData.align"
      :span-method="objectSpanMethod"
      :showHeader="showHeader"
      :data.sync="tableData.data"
      class="my-grid66"
    >
      <template #header>
        <div class="first-col">
          <div class="first-col-top">{{ slots[0] }}</div>
          <div class="first-col-bottom">{{ slots[1] }}</div>
        </div>
      </template>
    </vxe-grid> -->
    <vxe-table
      :showHeader="showHeader"
      :scroll-y="{ enabled: false }"
      :data="data.data"
      :span-method="objectSpanMethod"
    >
      <vxe-table-column
        :highlight-hover-row="true"
        v-for="(config, index) in data.columns"
        :key="index+Math.round(Math.random()*10000)"
        :type="config.type"
        :field="config.field"
        show-overflow="tooltip"
        :title="config.title"
        :align="align"
        :fixed="config.fixed"
        :width="config.width ? config.width : '200'"
        :min-width="config.minWidth ? config.minWidth : '200'"
        :filters="config.filters"
        :edit-render="{ autofocus: '.vxe-input--inner' }"
      >
      </vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      //列表数据
      type: Object | Array,
      default: () => ({
        columns: [],
        data: [],
        label: [],
      }),
    },
    slots: {
      //头部插槽
      type: Object | Array,
      default: () => ({
        columns: [],
        data: ["", ""],
      }),
    },
    maxHeight: {
      //高度
      type: Number | String,
      default: () => "",
    },
    merge: {
      type: Object | Array,
      default: () => [],
    },
    align: {
      type: String,
      default: () => "center",
    },
    reverse: {
      //行列是否转换
      type: Boolean,
      default: () => false,
    },
    // showHeader: {
    //   //表头是否显示
    //   type: Boolean,
    //   default: () => true,
    // },
    border: {
      //是否展示边框
      type: Boolean,
      default: () => true,
    },
  },
  data() {
    return {
      data: {
        data: ["", ""],
        columns: [],
      },
      showHeader: false,
    };
  },
  watch: {
    // tableData(val, oldVal) {
    //   // console.log(111)
    //   // //深度监听，可监听到对象、数组的变化
    //   // if (this.reverse == true) {
    //   //   let obj = new Object()
    //   //   obj = JSON.parse(JSON.stringify(this.tableData))
    //   //   this.reverseTable(obj.columns, obj.data);
    //   // }
    // },
    tableData: {
      //深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        if (this.reverse == true) {
          let obj = new Object();
          obj = JSON.parse(JSON.stringify(this.tableData));
          this.reverseTable(obj.columns, obj.data);
          this.showHeader = false;
        } else {
          this.data = JSON.parse(JSON.stringify(this.tableData));
          this.showHeader = true;
        }
        // console.log(val, oldVal);
      },
      deep: true, //true 深度监听
    },
  },
  created() {
    if (this.reverse == true) {
      let obj = new Object();
      obj = JSON.parse(JSON.stringify(this.tableData));
      this.reverseTable(obj.columns, obj.data);
      this.showHeader = false;
    } else {
      this.data = JSON.parse(JSON.stringify(this.tableData));
      this.showHeader = true;
    }
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex, visibleData }) {
      try {
        if (this.reverse == true) {
          // console.log(row.col0)
          //当前行号rowIndex、当前列号columnIndex四个属性
          if (row.col0.length === 1) {
            if (columnIndex === 2) {
              return {
                rowspan: 1,
                colspan: 2,
              };
            }
            //  else{
            //   return {
            //     rowspan: 0,
            //     colspan: 0,
            //   };
            // }
             else if (columnIndex === 0) {
              return {
                rowspan: 0,
                colspan: 0,
              };
            }
          }
          const fields = ["col0"];
          const cellValue = row[column.property];
          if (cellValue && fields.includes(column.property)) {
            const prevRow = visibleData[rowIndex - 1];
            let nextRow = visibleData[rowIndex + 1];
            if (prevRow && prevRow[column.property] === cellValue) {
              return { rowspan: 0, colspan: 0 };
            } else {
              let countRowspan = 1;
              while (nextRow && nextRow[column.property] === cellValue) {
                nextRow = visibleData[++countRowspan + rowIndex];
              }
              if (countRowspan > 1) {
                return { rowspan: countRowspan, colspan: 1 };
              }
            }
          }
        }
      } catch (err) {
        console.log(err);
      }
    },
    // 反转函数
    reverseTable(columns, list) {
      try {
        let arr = [];
        for (let i = 0; i < columns.length; i++) {
          if (!columns[i].children) {
            arr.push(columns[i]);
          } else {
            for (let j of columns[i].children) {
              j.parents = columns[i].title;
            }
            arr.push(...columns[i].children);
          }
        }

        const buildData = arr.map((column,index) => {
          const item = { col1: column.title };
          if(this.tableData.label.length>0){
            item.col2= this.tableData.label[index]
          }
          if (column.parents) {
            item["col0"] = column.parents;
          } else {
            item["col0"] = " ";
          }
          // list.forEach((row, indexs) => {
          //   item[`col${indexs + 2}`] = row[column.field];
          // });
          return item;
        });
        const buildColumns = [
          {
            field: "col0",
            fixed: "left",
            width: 100,
          },
          {
            field: "col1",
            fixed: "left",
          },
          {
            field: "col2",
            fixed: "left",
          }
        ];
        // if (this.tableData.label.length > 0) {
        //   buildColumns.push({
        //     field: "col2",
        //     fixed: "left",
        //   });
        // }
        // list.forEach((item, index) => {
        //   buildColumns.push({
        //     field: `col${index + 2}`,
        //     minWidth: 200,
        //   });
        // });
        this.data.data = buildData;
        this.data.columns = buildColumns;
        // console.log(this.data);
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

<style>
.my-grid66 .alert-message {
  height: 40px;
  display: flex;
  align-items: center;
  margin: 10px 0;
  border-radius: 4px;
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
}
.my-grid66 .alert-message-icon {
  width: 30px;
  text-align: center;
  color: #409eff;
  margin-right: 8px;
}
.my-grid66 .alert-message-content {
  flex-grow: 1;
  padding-right: 20px;
}
.my-grid66 .page-left {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.my-grid66 .select-count {
  display: inline-block;
  vertical-align: middle;
}
.my-grid66 .my-input {
  width: 100%;
}
.my-grid66 .first-col {
  position: relative;
  min-height: 30px;
}
.my-grid66 .first-col:before {
  content: "";
  position: absolute;
  left: -2%;
  top: 2%;
  width: 105%;
  height: 1px;
  transform: rotate(20deg);
  background-color: rgba(31, 179, 255, 0.1);
}
.my-grid66 .first-col .first-col-top {
  position: absolute;
  right: 4px;
  top: -20%;
}
.my-grid66 .first-col .first-col-bottom {
  position: absolute;
  left: 4px;
  bottom: -20%;
}
</style>